<template>
  <div class="entry_orders">
    <!--<scroller-->
      <!--:on-refresh="refresh"-->
      <!--:height="'100%'"-->
      <!--&gt;-->
      <!--:on-infinite="infinite"-->
      <div class="list">
        <ul v-for="i in list" :key="i.id">
          <li >
            <div class="left">
              <p>{{language === 'zh-CN' ? i.mill.mill_name:i.mill.english_name}}</p>
              <p class="p2">{{$t('product')}}：{{i.sac}}SAC</p>
              <p class="p3" >{{i.status === '0' ? $t('buy time') + ': ' + i.buy_time: $t('start time') + ': ' + i.start_time}}</p>
              <p class="p3" v-show="i.status !== '0'">{{$t('end time')}}: {{i.end_time}}</p>
            </div>
            <div class="right">
              <p class="p4" :style="{color: i.color}">{{i.showStatus}}</p>
            </div>
          </li>
          <div style="padding: 0 .4rem .2rem" v-if="i.status === '0'">
            <x-button :gradients="buttonColor"  @click.native="open(i.id, i.status)">{{$t('enable')}}</x-button>
          </div>
        </ul>
        <no-data v-if="list.length === 0"></no-data>
      </div>
    <!--</scroller>-->
    <!--<h5><a href="javascript:;"><</a> <span>我的矿机</span></h5>-->
  </div>
</template>

<i18n>
  product:
    en: Produced
    zh-CN: 已生产数量
  buy time:
    en: Purchase Time
    zh-CN: 购买时间
  start time:
    en: Start Time
    zh-CN: 启用时间
  end time:
    en: End Time
    zh-CN: 结束时间
  mill.unrunning:
    en: UnRunning
    zh-CN: 未运行
  enable:
    en: Runing
    zh-CN: 运行
  mill.enable:
    en: Runing
    zh-CN: 运行中
  mill.timeout:
    en: Time Out
    zh-CN: 已过期
</i18n>

<script>
  import {XButton} from 'vux'
  import NoData from '../components/nodata'
  export default {
    name: 'Entry_Orders',
    components: {
      NoData,
      XButton
    },
    data () {
      return {
        list: '',
        color: {color: '#FCC476'},
        color1: {color: '#83BE7E'},
        scrollLoading: true,
        buttonColor: ['#537fbf', '#537fbf'],
        language: localStorage.language
      }
    },
    created () {
      this.init()
    },
    computed: {
      scrollHeight () {
        console.log(window.screen.availHeight)
        return document.body.clientHeight - 46 + 'px'
      }
    },
    methods: {
      init () {
        this.getInfo()
      },
      refresh (done) {
        this.getInfo(done)
      },
      getInfo (done) {
        let vue = this
        let url = '/api/usercenter/myMills'
        vue.scrollLoading = false
        vue.post({
          url: url,
          params: {
            token: localStorage.token
          },
          success: function (data) {
            console.log(data)
            vue.list = data.data.map(i => {
              // if () {}
              if (i.status === '0') {
                i.showStatus = vue.$t('mill.unrunning')
                i.color = '#537fbf'
              }
              if (i.status === '1') {
                i.showStatus = vue.$t('mill.enable')
                i.color = '#83BE7E'
              }
              if (i.status === '2') {
                i.showStatus = vue.$t('mill.timeout')
                i.color = '#FCC476'
              }
              console.log(i)
              return i
            })
            // vue.scrollLoading = true
            done()
          }
        })
      },
      open (index, num) {
        console.log(index)
        console.log(num)
        if (num === '1') {

        } else {
          let vue = this
          let url = '/api/usercenter/startmymill'
          vue.post({
            url: url,
            params: {
              token: localStorage.token,
              usermill_id: index
            },
            success: function (data) {
              console.log(data)
              if (data.code === 1) {
                vue.getInfo()
              }
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .entry_orders{
    font-size: 0.3rem;
    height: 100%;
  }
  .entry_orders h5{
    height: 0.9rem;
    line-height: 0.9rem;
    margin: 0;
    font-weight: normal;
    background-color: #537fbf;
    color: #fff;
    display: flex;
  }
  .entry_orders h5 a{
    font-size: 0.4rem;
    text-decoration: none;
    color: #fff;
    flex-grow: 1;
    margin-left: 0.4rem;
  }
  .entry_orders h5 span{
    flex-grow:2 ;
    padding-left: 1rem;
  }
  .entry_orders li{
    display: flex;
    margin-bottom: 0.1rem;
  }
  .left{
    flex-grow: 1;
    padding-left: 0.4rem;
    padding-top: 0.1rem;
  }
  .right{
    flex-grow: 1;
    width: 2.5rem;
    text-align: right;
    padding-right: 0.4rem;
  }
  p{
    font-size: 0.28rem;
    line-height: 0.6rem;
  }
  .p2{
    color: #537fbf;
    font-weight: bold;
  }
  .p3{
    font-size: 0.24rem;
    color: #999;
    line-height: 1.8;
  }
  .p4{
    margin-top: 0.7rem;
    color: #57a94f;
  }
  .p5{
    color: #fbb752;
  }
  .list ul{
    border-bottom: 0.01rem solid #eeeeee;
  }
</style>
